<template>
  <!--类名a用于添加左上角的直角和右上角的直角 类名b用于添加左下角的直角和右下角的直角 -->
  <div class="box">
    <!-- 左边 -->
    <div class="left">
      <!-- 左边第一个 -->
      <div class="lmq a" >
        <div class="b"></div>
        <div id="main" class="main" style="width:100%"></div>
      </div>
      <!-- 左边第二个 -->
      <div class="lmq a">
        <div class="b"></div>
        <div id="main2" class="main" style="width:100%"></div>
      </div>
      <!-- 左边第三个 -->
      <div class="lmq a">
        <div class="b"></div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="center">
      <!-- 数字 -->
      <div class="c-top">
        <ul>
          <li>156622563</li>
          <li>32050060</li>
          <li>121309348</li>
          <li>3263155</li>
        </ul>
        <div>
          <span>累计确诊</span>
          <span>现存确诊</span>
          <span>累计治愈</span>
          <span>累计死亡</span>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div class="lmq a">
        <div class="b"></div>
        <div id="main1" class="main" style="width: 100%"></div>
      </div>
      <div class="lmq a">
        <div class="b"></div>
        <div id="main3" class="main" style="width: 100%"></div>
      </div>
      <div class="lmq a">
        <div class="b"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入字体样式
import "../../public/font/font-family.css";
import echarts from "echarts";
import $ from "jquery";
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    // 新增确诊top10
    this.main();
    // 主要疫情国家治愈率
    this.main1();
    // 大洲感染总人数趋势图
    this.main2();
    this.main3();
  },
  methods: {
    // 新增确诊top10图表
    main() {
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        // 标题信息
        title: {
          text: "新增确诊TOP10",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "14px",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "14px",
          },
        },
        // 鼠标悬停显示信息
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 图表与父盒子之间的距离
        grid: {
          top: "19%",
          right: "6%",
          left: "14%",
          bottom: "16%",
        },
        xAxis: [
          {
            type: "category",
            data: ["英国", "巴西", "伊朗", "哥伦比亚", "泰国"],
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 14,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: [5000, 2600, 1300, 1300, 1250, 1500],
            barWidth: "12px", //柱状图每个柱子的宽度
            itemStyle: {
              normal: {
                color: "#2f89cf", //柱状图每个柱子的背景颜色
                barBorderRadius: [30, 30, 30, 30], //柱状图每个柱子的圆角边框
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", (e) => {
          myChart.resize();
      });
    },
    // 主要疫情国家治愈率
    main1() {
      var myChart = echarts.init(document.getElementById("main1"));
      var data = [0, 34, 60, 78, 0];
      var titlename = ["美国", "西班牙", "哥伦比亚", "英国", "小日本"];
      var valdata = [683, 234, 234, 523, 345];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      var option = {
        // 标题
        title: {
          text: "主要疫情国家治愈率",
          x: "center",
          y: "4%",
          textStyle: {
            color: "#fff",
            fontSize: "14px",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                return value;
              },
            },
          },
          {
            show: false,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: "20px",
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: "22px",
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 20,
              },
            },
          },
        ],
        // 图表与父盒子之间的距离
        grid: {
          top: "15%",
          right: "3%",
          left: "20%",
          bottom: "10%",
        },
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
     // 大洲感染总人数趋势图
    main2() {
      var myChart = echarts.init(document.getElementById("main2"));
      var data1 = [620, 580, 610, 640, 810, 800, 830];
      var data2 = [210, 220, 290, 200, 205, 240, 230];
      var data3 = [700, 840, 710, 690, 590, 640, 720];
      var data4 = [400, 400, 400, 500, 400, 420, 470];
      var data5 = [600, 620, 640, 620, 470, 530, 520];
      var xData = [
        "02/14",
        "04/04",
        "05/23",
        "07/11",
        "08/29",
        "10/17",
        "12/05",
      ];
      var cp = ["亚洲", "北美洲", "大洋洲", "欧洲", "其他"];
      var option = {
        backgroundColor: "#000",
        title: {
          text: "大洲感染总人数趋势图",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: "12px",
          },
          top: "5%",
          left: "center",
        },
        grid: {
          borderWidth: 0,
          top: "35%",
          left: "14%",
          right: "6%",
          bottom: "14%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "12%",
          textStyle: {
            fontSize: "8px",
            fontFamily: "MicrosoftYaHeiUI",
            color: "#FFFFFF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true, //隐藏X轴轴线
              symbol: ["none", "arrow"],
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: "12px",
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
            },
            axisLine: {
              show: true, //隐藏X轴轴线
              symbol: ["none", "arrow"],
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: "12px",
              formatter: (params) => {
                return params + "";
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: cp[0],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "rgba(255, 196, 53, 1)",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F0B62A", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#FFC12B", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data1,
          },
          {
            name: cp[1],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: '12px',
                    color: "#fff",
                  },
                },
                color: "#00CC99",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00CC99", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#00CC99", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data2,
          },
          {
            name: cp[2],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#33CCFF",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#33CCFF", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#33CCFF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data3,
          },
          {
            name: cp[3],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#9933FF",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9933FF", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#9933FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data4,
          },
          {
            name: cp[4],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#FF6633",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FF6633", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#FF6633", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data5,
          },
        ],
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    main3() {
      var myChart = echarts.init(document.getElementById("main3"));
      var data1 = [620, 580, 610, 640, 810, 800, 830];
      var data2 = [210, 220, 290, 200, 205, 240, 230];
      var data3 = [700, 840, 710, 690, 590, 640, 720];
      var data4 = [400, 400, 400, 500, 400, 420, 470];
      var data5 = [600, 620, 640, 620, 470, 530, 520];
      var xData = [
        "02/14",
        "04/04",
        "05/23",
        "07/11",
        "08/29",
        "10/17",
        "12/05",
      ];
      var cp = ["亚洲", "北美洲", "大洋洲", "欧洲", "其他"];
      var option = {
        backgroundColor: "#000",
        title: {
          text: "大洲感染总人数趋势图",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: "12px",
          },
          top: "5%",
          left: "center",
        },
        grid: {
          borderWidth: 0,
          top: "35%",
          left: "14%",
          right: "6%",
          bottom: "14%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "12%",
          textStyle: {
            fontSize: "8px",
            fontFamily: "MicrosoftYaHeiUI",
            color: "#FFFFFF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true, //隐藏X轴轴线
              symbol: ["none", "arrow"],
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: "12px",
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
            },
            axisLine: {
              show: true, //隐藏X轴轴线
              symbol: ["none", "arrow"],
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: "12px",
              formatter: (params) => {
                return params + "";
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: cp[0],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "rgba(255, 196, 53, 1)",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F0B62A", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#FFC12B", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data1,
          },
          {
            name: cp[1],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: '12px',
                    color: "#fff",
                  },
                },
                color: "#00CC99",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00CC99", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#00CC99", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data2,
          },
          {
            name: cp[2],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#33CCFF",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#33CCFF", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#33CCFF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data3,
          },
          {
            name: cp[3],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#9933FF",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9933FF", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#9933FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data4,
          },
          {
            name: cp[4],
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  formatter: (params) => {
                    return params.value + "%";
                  },
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                color: "#FF6633",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FF6633", // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: "#FF6633", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data5,
          },
        ],
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
};
</script>

<style scoped lang='scss'>
.box {
  display: flex;
}
.left,
.right {
  width: 505px;
}
.left {
  margin: 4px 0 4px 4px;
}
.right {
  margin: 4px 4px 4px 0;
}
.center {
  width: 833px;
  margin: 4px 4px 0;
}
.main {
  height: 120px;
  margin-bottom: 6px;
}
.a {
  border: 1px solid #0a1c61;
  position: relative;
  // 左上角
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #09a8ec;
    border-left: 1px solid #09a8ec;
    z-index: 999;
  }
  // 右上角
  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #09a8ec;
    border-right: 1px solid #09a8ec;
    z-index: 999;
  }
}
.b {
  // 左下角
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #09a8ec;
    border-left: 1px solid #09a8ec;
    z-index: 999;
  }
  // 右下角
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-right: 1px solid #09a8ec;
    border-bottom: 1px solid #09a8ec;
    z-index: 999;
  }
}
.c-top {
  background: #0a1c61;
  opacity: 0.6;
  ul {
    margin: 5px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #3b4d85;
    position: relative;
    text-align: center;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 20px;
      border-top: 1px solid #09a8ec;
      border-left: 1px solid #09a8ec;
    }
    &::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 10px;
      height: 20px;
      border-right: 1px solid #09a8ec;
      border-bottom: 1px solid #09a8ec;
    }
    li {
      font-family: "num";
      font-size: 16px !important;
      font-weight: 700;
      color: hsl(70, 100%, 70%);
      font-size: 11px;
      list-style: none;
      position: relative;
      float: left;
      width: 25%;
    }
    li:nth-child(-n + 3) {
      &::after {
        content: "";
        position: absolute;
        top: 9px;
        right: 0;
        width: 1px;
        height: 10px;
        background: #09a8ec;
      }
    }
  }
  div {
    display: flex;
    justify-content: space-around;
    color: white;
    margin-bottom: 6px;
    span {
      font-size: 7px;
    }
  }
}
</style>
